<template>
    <view class="app-container info">
        <zzk-nav title="实时信息"></zzk-nav>
        <view class="info-select flexrow">
            <text class="txt">{{ goods.goodsName }}</text>
            <text class="txt link" @tap="linkto(`/pages/goods/select?id=${goods.goodsId}`)">切换商品</text>
        </view>
        <view class="info-list">
            <view class="item flexrow">
                <view class="icon"></view>
                <view class="text">
                    <text class="name">库存</text>
                    <text class="txt">数量：{{ suminfo.stock }}</text>
                </view>
            </view>
            <view class="item flexrow" @tap="linkto('/pages/order/list?type=LEASE')">
                <view class="icon"></view>
                <view class="text">
                    <text class="name">实时在租</text>
                    <text class="txt">库存数量：{{ suminfo.renting }}</text>
                </view>
                <view class="right flexrow">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view class="item flexrow" @tap="linkto('/pages/order/list?type=BUY')">
                <view class="icon"></view>
                <view class="text">
                    <text class="name">已售</text>
                    <text class="txt">数量：{{ suminfo.sold }}</text>
                </view>
                <view class="right flexrow">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view class="item flexrow" @tap="linkto('/pages/order/list?type=MIETE')">
                <view class="icon"></view>
                <view class="text">
                    <text class="name">已收租金</text>
                    <text class="txt">金额：{{ convertFenToYuan(suminfo.receivedRent) }}</text>
                </view>
                <view class="right flexrow">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
            <view class="item flexrow" @tap="linkto('/pages/order/list?type=LEASE')">
                <view class="icon"></view>
                <view class="text">
                    <text class="name">实时押金</text>
                    <text class="txt">金额：{{ convertFenToYuan(suminfo.deposit) }}</text>
                </view>
                <view class="right flexrow">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsList, goodsSummary } from '@/api/goods.js'
import { linkto, convertFenToYuan } from '@/utils/util'

const goods = ref({})
const suminfo = ref({})

onLoad(() => {
    getGoods()
    
    uni.$on('change', e => {
        goods.value = e
        getSummary()
    })
})

const getGoods = () => {
    goodsList().then(res => {
        const _list = res.records
        if (_list.length) {
            goods.value = _list[0]
            getSummary()
        }
    })
}

const getSummary = () => {
    goodsSummary({ goodsId: goods.value.goodsId }).then(res => {
        suminfo.value = res
    })
}
</script>

<style lang="scss" scoped>
.info {
    &-select {
        margin: 20rpx $zzk-margin 0;
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
            &.link {
                color: $u-primary;
                margin-left: 20rpx;
            }
        }
    }
    &-list {
        margin: 20rpx $zzk-margin 0;
        background-color: #fff;
        border-radius: 16rpx;
        .item {
            padding: 40rpx;
            border-bottom: #f5f5f5 1rpx solid;
            align-items: center;
            &:last-child {
                border-bottom: none;
            }
        }
        .icon {
            background-image: url('/static/images/user/infoicon.png');
            background-size: cover;
            width: 56rpx;
            height: 56rpx;
        }
        .text {
            flex: 1;
            padding-left: 20rpx;
        }
        .name {
            font-size: 28rpx;
            line-height: 48rpx;
        }
        .txt {
            font-size: 24rpx;
            line-height: 48rpx;
            color: #999;
        }
        .right {
            align-items: center;
        }
        .num {
            font-size: 28rpx;
            line-height: 48rpx;
        }
    }
}
</style>